<template>
	<view class="login">
		<view class="top">
			<up-image src="/static/logo.png" width="128rpx" height="128rpx"></up-image>
			<view class="name">欢迎登录尧君智库</view>
		</view>
		<view class="area">
			<u--form :model="loginForm" ref="uForm" errorType="toast" :labelWidth="0" >
				<u-form-item prop="account">
					<u--input prefixIcon="account" prefixIconStyle="font-size: 24px;margin-left: 10px;" placeholder="请输入手机号码" type="number" :maxlength="11" v-model="loginForm.account" clearable
						:customStyle="{
	                            borderBottom: '1px solid #E4E4E4',
	                            padding: '24rpx 0',
	                            borderRadius: 'unset',
	                            fontSize: '32rpx'
	                        }"></u--input>
				</u-form-item>
				<u-form-item prop="pwd">
					<u-input prefixIcon="lock" prefixIconStyle="font-size: 24px;margin-left: 10px;" type="password" v-model="loginForm.pwd" placeholder="请输入密码" :customStyle="{
	                                borderBottom: '1px solid #E4E4E4',
	                                padding: '24rpx 0',
	                                borderRadius: 'unset',
	                                fontSize: '32rpx'
	                            }"></u-input>
				</u-form-item>
			</u--form>
			<view class="v-radio">
				<u-checkbox-group v-model="agree">
					<u-checkbox :size="16" name="agree">
					</u-checkbox>
				</u-checkbox-group>
				<!-- ；未注册的手机号将自动注册 -->
				<view class="text">我已阅读并同意<text>《服务条款》</text><text>《隐私权政策》</text></view>
			</view>
			<view style="margin-top: 60rpx;">
				<u-button shape="circle" color="#1A65FF" text="登录" @click="login"></u-button>
			</view>
		</view>
		<view class="btm-text">
			尧君智库通将根据第三方账号服务平台的授权范围获取您的信息
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import store from '@/store'

	let loginForm = ref({
		account: '',
		pwd: ''
	})

	let agree = ref([])


	function login() {
		if (agree.value.length == 0) {
			uni.$u.toast('请同意并阅读服务条款、隐私权政策')
			return
		}
		// this.$refs.uForm.validate().then(res => {
		pwdLogin();
		// })
	}

	// 密码登录
	async function pwdLogin() {
		store.dispatch('Login', loginForm.value).then(() => {
			loginSuccess()
		})
	};

	// 登录成功后，处理函数
	function loginSuccess() {
		// 设置用户信息
		store.dispatch('GetInfo').then(res => {
			uni.switchTab({
				url: '/pages/index'
			});
		})
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		background-image: url('https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/03/21/png/b234ec3380009f35a7cb0dc6a80f5f37b0440469912995-QyQ67y (2)_20240321163813A006.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.login {
		padding: 208rpx 48rpx 94rpx;

		.top {
			display: grid;
			justify-items: center;

			/* justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。 */
			.name {
				font-size: 36rpx;
				color: #000000;
				font-weight: bold;
				padding-top: 16rpx;
				line-height: 56rpx;
			}
		}

		.area {
			padding-top: 100rpx;

			.v-radio {
				padding-top: 48rpx;
				display: flex;
				align-items: center;
			}

			.text {
				font-size: 12px;
				color: #999999;
				margin-left: 16rpx;

				text {
					color: #1A65FF;
				}
			}
		}

	}

	.btm-text {
		height: 30rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
		line-height: 26rpx;
		position: fixed;
		bottom: 94rpx;
		text-align: center;
		width: calc(100vw - 96rpx);
	}
</style>